<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Tabs :value="tabName" @on-click="changeTab">
        <TabPane label="充值列表" name="topup"><topup ref="topup" /></TabPane>
        <TabPane label="对账单" name="reconciliation"
          ><reconciliation ref="reconciliation"
        /></TabPane>
      </Tabs>
    </Card>
  </div>
</template>
<script>
import topup from "./topup";
import reconciliation from "./reconciliation";
export default {
  name: "statementaccount",
  components: { topup, reconciliation },
  data() {
    return {
      tabName: "topup",
    };
  },
  mounted() {
    this.$refs[this.tabName].getData(true);
  },
  methods: {
    changeTab(e) {
      this.tabName = e;
      this.$refs[this.tabName].getData(true);
    },
  },
};
</script>
